<template>
  <div class="login-container">
    <div class="box">
      <div class="left">
        <img class="leftimg"
             src="../../assets/login/bac.png"
             alt="" />
      </div>
      <div class="right">
        <div class="title f36 fb">兜兜智聘灵活用工</div>
        <div class="title2 f28">总管理后台</div>
        <el-form ref="ruleFormRef"
                 :model="ruleForm"
                 :rules="rules"
                 class="demo-ruleForm">
          <el-form-item label=""
                        prop="account">
            <el-input placeholder="请输入手机号"
                      v-model="ruleForm.account"
                      type="account"
                      :prefix-icon="User"
                      clearable />
          </el-form-item>
          <el-form-item label=""
                        prop="password">
            <el-input placeholder="请输入密码"
                      v-model="ruleForm.password"
                      :prefix-icon="Lock"
                      type="password"
                      clearable />
          </el-form-item>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       @click="submitForm(ruleFormRef)">登 录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script  setup>
import { defineComponent, ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { Search, User, Lock } from "@element-plus/icons-vue";
import { directives } from '../../store/directives'
import { dictionary } from "../../store/dictionary";

import { addDynamicRoutes } from "@/router";
const dictionaryList = dictionary();
const directivesBtns = directives()
const ruleFormRef = ref();
const router = useRouter();
const ruleForm = reactive({
  password: "",
  account: "",
  type: 0
});

const app = getCurrentInstance()?.proxy;
const rules = reactive({
  password: [{ required: true, message: "请输入正确的密码", trigger: "blur" }],
  account: [{ required: true, message: "请输入正确的手机号", trigger: "blur" }],
});
onMounted(() => {

  document.onkeyup = (e => {
    if (e.keyCode === 13 && e.target.baseURI.match(/login/)) {
      // 调用登录 验证方法
      submitForm(ruleFormRef.value)
    }
  })
})


const loginIndex = (data) => {
  const loading = ElLoading.service({
    lock: true,
    text: '登陆中...',
  })
  if (data?.accessToken) {
    if (!data.menus || data.menus?.length <= 0) {
      ElMessage({ type: 'error', message: '账号无权限 请联系管理员' })
      loading.close()
      return
    } else {
      let dynamicRoutes = []
      data.menus.forEach((item, index) => {
        let a = {
          path: item.path,
          components: item.redirect?.slice(7),
          name: item.menuName,
          meta: JSON.parse(item.meta),
          children: []
        }
        item.children.forEach((io) => {
          if (io.menuName) {
            const child = {
              path: io.path?.slice(1),
              components: io.redirect?.slice(7),
              name: io.menuName,
              meta: JSON.parse(io.meta),
              children: []
            };
            if (io.children.length - 0 > 0) {
              io.children.forEach(ip => {
                const child1 = {
                  path: ip.path?.slice(1),
                  components: ip.redirect?.slice(7),
                  name: ip.menuName,
                  meta: JSON.parse(ip.meta)
                }
                child.children.push(child1)
              })
            }
            a.children.push(child);
          }
        })
        dynamicRoutes.push(a)
      });
      if (dynamicRoutes) {
        localStorage.setItem("dynamicRoutes", JSON.stringify(dynamicRoutes));
        addDynamicRoutes(dynamicRoutes);
      }
      directivesBtns.getList(app)
      dictionaryList.getList(app)
      localStorage.setItem('token', data?.accessToken)
      localStorage.setItem('userInfor', JSON.stringify(data))
      // localStorage.setItem('route',JSON.stringify(data.menus))
      loading.close()
      // return
      if (dynamicRoutes[0]?.children[0]?.path) {
        router.push({ path: data.menus[0].path + data.menus[0].children[0].path });
      } else {
        router.push({ path: data.menus[0].path });
      }

    }
  }
  loading.close()
}

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {

      app.$http.post('/sysuser/manager/login', ruleForm).then(rs => {
        if (rs.data?.loginStatus == 1) {
          ElMessageBox.confirm(
            '此账号已在' + rs.data.ip + '地方登录',
            '是否强制登录',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
              ruleForm.loginStatus = 1
              app.$http.post('/sysuser/manager/login', ruleForm).then(res => {
                loginIndex(res.data)
              })
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '已取消',
              })
            })
        } else {
          loginIndex(rs.data)
        }
      }).catch(() => {
      })
      return;
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: #0079fe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .box {
    width: 1240px;
    height: 693px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.2);
    display: flex;
    padding: 47px 66px;

    .left {
      height: 100%;
      width: 672px;
      .leftimg {
        width: 672px;
        height: 672px;
      }
    }
    .right {
      margin-left: 40px;
      text-align: left;
      .title {
        margin-top: 120px;
        color: rgba(0, 121, 254, 1);
      }
      .title2 {
        margin-top: 20px;
      }
      .demo-ruleForm {
        margin-top: 31px;
        ::v-deep(.el-input) {
          width: 100% !important;
        }
        ::v-deep(.el-input__wrapper) {
          box-shadow: none;
          border-bottom: 1px solid #ccc;
          border-radius: 0;
          padding: 10px 0 6px 0;
        }
      }
      .btns {
        margin-top: 34px;
        ::v-deep(.el-button) {
          width: 100%;
          height: 45px;
          line-height: 23px;
          border-radius: 30px;
          background-color: rgba(0, 121, 254, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 16px;
          text-align: center;
          font-family: Roboto;
        }
      }
    }
  }
}
</style>
